<template>
  <div class="shouxin1">
    <div class="sq">我的授权</div>
    <div class="shouxin2">
      <div class="con_boxs">
        <!-- 搜索 -->
        <div class="con_sousuo">
          <el-form
            :inline="true"
            :model="formsq"
            class="demo-form-inline"
            label-width="100px"
          >
            <el-form-item label="银行名称">
              <el-input
                placeholder="银行名称"
                v-model="formsq.bankName"
                clearable
              >
              </el-input>
            </el-form-item>
            <!-- 搜索按钮 -->
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="shouquanList(formsq)"
              >查询</el-button
            >
            <el-button type="primary" plain class="gx" @click="shouquanList()"
              ><img
                src="../../assets/sx.png"
                style="width: 17px; height: 18px"
              />更新</el-button
            >
          </el-form>
        </div>

        <!-- 列表 -->
        <div class="con_table">
          <el-table
            :data="tableData"
            border
            style="width: 90%; margin: 26px; margin-top: -3px"
            :header-cell-style="{ background: '#f5fafd', color: '#818EA8' }"
          >
            <!-- 列表数据 -->
            <el-table-column prop="account" label="序号"> </el-table-column>
            <el-table-column prop="bankName" label="申请银行名称">
            </el-table-column>
            <el-table-column prop="applyTime" label="申请时间">
            </el-table-column>
            <el-table-column prop="applyContent" label="申请内容">
            </el-table-column>
            <!-- 列表数据end -->
            <!-- 操作按钮 -->
            <el-table-column fixed="right" label="操作" width="150" >
              <template slot-scope="scope">
                <!-- <el-button
                  @click="handleClick(scope.row)"
                  type="primary"
                  size="small"
									round
                  >查看详情</el-button
                > -->
                <el-button type="text" size="small"   v-if="scope.row.applyResult == 0" @click="yunxu(scope.row)"
                  >允许</el-button
                >
                <el-button type="text" size="small"    v-if="scope.row.applyResult == 0"   @click="bohui(scope.row)"
                  >驳回</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 弹框 start-->
      <el-dialog title="允许" :visible.sync="dialogFormVisible">
        <el-form :model="formbh" ref="formbh" :rules="rules">
          <el-form-item :label-width="formLabelWidth">
            <div class="dqz">
              <span>当前正在授权允许他人查看您的隐私数据!</span>
            </div>
            <div class="yxq">
              <span>*允许前请先阅读《隐私数据授权条例》</span>
            </div>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" prop="check">
            <div>
              <div>
                <el-checkbox
                  v-model="formbh.check"
                  true-label="1"
                  false-label="0"
                  >我已阅读</el-checkbox
                >
                <!-- <input type="checkbox" value="0" name="a"  @click="this.value=(this.value==0)?1:0"><span style="margin-left:10px">我已阅读</span> -->
              </div>
            </div>
          </el-form-item>
          <el-form-item
            label="口令:"
            :label-width="formLabelWidth"
            prop="password"
            maxlength="6"
          >
            <el-input v-model="formbh.password" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="queren('formbh')">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 弹框 end-->
      <!-- 弹框 start2-->
      <el-dialog title="驳回" :visible.sync="dialogFbohuiVisible">
        <el-form :model="formbhh" ref="addbhh">
          <el-form-item :label-width="formLabelWidth">
            <div class="ddd">
              <span>即将驳回该条请求</span>
            </div>
            <div class="ddd">
              <span>对方将不能查看您的隐私数据。</span>
            </div>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="驳回原因:">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="formbhh.rejectReason"
              maxlength="30"
              show-word-limit
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFbohuiVisible = false">取 消</el-button>
          <el-button type="primary" @click="querenbhh">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 弹框 end2-->
      <!-- 分页 -->
      <div class="block" style="width: 90%; margin: 26px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="page.PageRange"
          :page-size="1"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
      <!-- 分页end -->
    </div>
  </div>
</template>


<script>
import { querysq, addbh, addbhh } from "@/api/leagues/app";
export default {
  data() {
    return {
      input: "", //搜索框
      dialogFormVisible: false,
      dialogFbohuiVisible: false,
      rowid: "",
      formbh: {
        check: 0,
        password: "",
        // id: "",
      },
      rules: {
        check: [{ required: true, message: "请勾选已阅读", trigger: "blur" }],
        password: [
          { required: true, message: "请输入口令", trigger: "blur" },
          // { min: 3, max: 5, message: "六位数口令", trigger: "blur" },
        ],
      },
      formbhh: {
        rejectReason: "",
      },
      formLabelWidth: "150px",
      // 列表
      tableData: [],
      formsq: {},
      // 分页
      page: {
        current: 1, //默认从第一页开始
        PageRange: [10, 20, 30], //规定多少个页算一个区间
        total: 0,
      },
    };
  },
  mounted() {
    this.shouquanList();
  },

  //方法集合
  methods: {
    // 列表操作安钮
    handleClick(row) {
      console.log(row);
      this.$router.push({
        name: "listBiaoGe",
        params: {
          // id: id
        },
      });
    },

    //列表this.formt

    shouquanList: function () {
      let params = this.formsq;
      let page = this.page;
      querysq(
        Object.assign(
          {
            current: page.current,
            size: page.size,
          },
          params
        )
      ).then((response) => {
        if (response) {
          var that = this;
          that.tableData = response.data.data.records;
          this.page.size = response.data.data.size;
          this.page.current = response.data.data.current;
          this.page.total = response.data.data.total;
          // that.$message({
          //   duration: 600,
          //   message: "查询成功",
          //   type: "success",
          // });
        } else {
          that.$message.success(response.data.data.msg);
        }
      });
    },

    yunxu(row) {
      this.formbh.instanceId = row.instanceId;
      this.dialogFormVisible = true;
    },
    bohui(row) {
      this.formbhh.instanceId = row.instanceId;
      this.dialogFbohuiVisible = true;
    },
    queren(formbh) {
      var that = this;
      this.$refs[formbh].validate((valid) => {
        if (valid) {
          if (this.formbh.check == 1) {
            addbh(that.formbh).then((data) => {
              if (data.data) {
                that.dialogFormVisible = false;
                that.$message.success(data.data.msg);
                this.formbh.password="";
                this.formbh.check="";
                  this.shouquanList();
              }
            });
          } else if (this.formbh.check == 0) {
              that.dialogFormVisible = true;
            that.$message({
              duration: 600,
              message: "请勾选我已阅读",
              type: "warning",
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    querenbhh() {
      var that = this;
      that.$refs.addbhh.validate((valid) => {
        if (valid) {
          addbhh(that.formbhh).then((data) => {
            if (data.data) {
              that.dialogFbohuiVisible = false;
              that.$message.success(data.data.msg);
                this.shouquanList();
            }
            that.$message.success(data.data.msg);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.shouquanList();
      console.log(`当前页: ${val}`);
    },
    PageRangeDate() {
      this.tableData.forEach((ele) => {
        this.PageRange.push(ele.id);
      });
      console.log(this.PageRange, "tab");
    },
    // 分页end
  },
};
</script>
<style>
.shouxin1 {
  width: 1200px;
  height: 882px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 10px 10px;
  margin: 0 auto;
  position: relative;
  top: 50%;
}
.dqz {
  height: 15px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #051232;
  line-height: 35px;
}
.ddd {
  height: 40px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #051232;
  line-height: 25px;
}
.xg {
  width: 14px;
  height: 14px;
  background: #ffffff;
  border: 1px solid #bdc3ca;
  border-radius: 3px;
}
.yd {
  margin-top: -12px;
  margin-left: 12px;
}
.shouxin2 {
  padding-top: 50px;
}

.yxq {
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #0075ff;
  line-height: 60px;
}
.sq {
  height: 24px;
  font-size: 25px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #051232;
  line-height: 24px;
  padding-top: 33px;
  padding-left: 21px;
}
.el-form-item__label {
  color: #838a99 !important;
}
</style>
